<template>
  <div>
    <UserAction />
    <div class="body">
      <div class="g-con">
        <div class="title">
          {{ t('bLogTrends.t1') }}
        </div>
        <div class="tab">
          <div
            class="tab-item"
            :class="{ active: listType == 1 }"
            @click="tabChange(1)"
          >
            <h3>{{ creatorInfo.articleNum || 0 }}</h3>
            <p>{{ t('bLogTrends.tb1') }}</p>
          </div>
          <div
            class="tab-item"
            :class="{ active: listType == 2 }"
            @click="tabChange(2)"
          >
            <h3>{{ creatorInfo.collectNum || 0 }}</h3>
            <p>{{ t('bLogTrends.tb2') }}</p>
          </div>
          <div
            class="tab-item"
            @click="tabChange(3)"
            :class="{ active: listType == 3 }"
          >
            <h3>{{ creatorInfo.collectResumeNum || 0 }}</h3>
            <p>{{ t('bLogTrends.tb3') }}</p>
          </div>
        </div>
        <div
          class="list"
          v-if="listType != 3"
        >
          <div
            class="list-item"
            v-for="(item, index) in articleList"
            :key="index"
          >
            <div class="del-btn">
              <Delete
                style="width: 22px; color: white"
                @click="delOrCancel(item)"
              />
            </div>
            <div class="time">
              {{ dateFormat(item.createTime, 2) }} {{ listType == 1 ? t('bLogTrends.lt1') : listType == 2 ? t('bLogTrends.lt2') : '' }}
              <!-- <span>——</span> -->
            </div>
            <h3
              class="list-title"
              @click="openUrl(`/blogDetail`, {id: item.id})"
            >
              {{ item.articleTitle }}
            </h3>
            <div class="text noscrollbar">
              {{ item.isShowMore ? item.articleText : toText(item.articleText, 150) }}
              <span
                v-if="item.articleText?.length > 150"
                class="show-more"
                @click="item.isShowMore = !item.isShowMore"
              >
                {{ item.isShowMore ? t('blog.b2') : `...${t('blog.b1')}` }}
              </span>
            </div>

            <ActicleComment :item="item" @getList="getList"/>
          </div>
        </div>
        <div
          class="resume-list"
          v-if="listType == 3"
        >
          <div
            v-for="(item, index) in resumeCollectionList"
            :key="index"
            class="item"
            @click="openUrl('/crewResume', { id: item.id })"
          >
            <el-row>
              <div
                class="del"
                @click.stop="crewResumeCancelFn(item)"
              >
                <Delete style="width: 18px; color: white" />
              </div>
              <el-col :span="24">
                <img
                  :src="item.headSculpture"
                  height="180"
                />
              </el-col>
              <el-col
                :span="24"
                class="name line-1"
                >{{ item.crewName }}</el-col
              >
              <el-col
                :span="24"
                class="country"
                >{{ item.crewLocation }}</el-col
              >
              <el-col
                :span="24"
                class="experience"
                >{{ getDictLabel('duties', item.duties) }}</el-col
              >
              <el-col
                :span="24"
                class="status"
              >
                <div>
                  {{ getDictLabel('resume_work_status', item.crewStatus) }}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="flexcc mt-3">
          <el-pagination
            layout="prev, pager, next"
            :hide-on-single-page="total <= page.pageSize"
            :total="total"
            v-model:current-page="page.pageNum"
            :page-size="page.pageSize"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCustomerInfo, listPage, getCollectionList, cancelFavorite, delArticle, crewResumeCancel } from '@/service/blog.js'
import { dateFormat, toText, openUrl } from '@/utils'
import { useI18n } from 'vue-i18n'
import useDict from '@/hooks/useDict'
import UserAction from '@/components/UserAction.vue'
import ActicleComment from '@/components/ActicleComment.vue'

const router = useRouter()
const route = useRoute()

const { dictData, getDictData, getDictLabel } = useDict()
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})
const listType = ref(1)
const tabChange = (val) => {
  listType.value = val
  page.value.pageNum = 1
  if (listType.value == 1 || listType.value == 2) {
    getList()
  }
  if (listType.value == 3) {
    getCollectionListFn()
  }
}
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数

const delOrCancel = (item) => {
  ElMessageBox.confirm(t('popconfirm_del'), '', {
    confirmButtonText: t('confirmText'),
    cancelButtonText: t('cancelText'),
    type: 'warning'
  })
    .then(() => {
      if (listType.value == 1) {
        delArticle(item.id).then((res) => {
          ElMessage({
            message: t('bLogTrends.m1'),
            type: 'success'
          })
          getList()
          getCustomerInfoFn()
        })
      } else {
        let data = {
          customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
          articleId: item.id
        }
        cancelFavorite(data).then((res) => {
          ElMessage({
            message: t('bLogTrends.m2'),
            type: 'success'
          })
          getList()
          getCustomerInfoFn()
        })
      }
    })
    .catch(() => {})
}
const crewResumeCancelFn = (item) => {
  ElMessageBox.confirm(t('popconfirm_del'), '', {
    confirmButtonText: t('confirmText'),
    cancelButtonText: t('cancelText'),
    type: 'warning'
  })
    .then(() => {
      let data = {
        crewResumeId: item.id,
        customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
      }
      crewResumeCancel(data).then((res) => {
        ElMessage({
          message: t('bLogTrends.m2'),
          type: 'success'
        })
        getCollectionListFn()
      })
    })
    .catch(() => {})
}

// 文章列表
const articleList = ref([])
const getList = () => {
  listPage(page.value, {
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
    queryType: listType.value
  }).then(({ rows, total: t }) => {
    rows.forEach((item) => {
      item.isShowMore = false
      item.imgList = item.articlePicture?.split(',')?.slice(0, 9)
      item.imgListAll = item.articlePicture?.split(',') || []

      item.commentFlag = false
      item.shareFLag = false
      item.likeFlag = item.isLike > 0 ? true : false
      item.collectFlag = item.isCollect > 0 ? true : false
    })
    articleList.value = rows

    total.value = t
  })
}

// 收藏列表
const resumeCollectionList = ref([])
const getCollectionListFn = () => {
  let queryParams = {
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
    ...page.value
  }
  getCollectionList(queryParams).then(({ rows, total: t }) => {
    resumeCollectionList.value = rows
    total.value = t
  })
}

//
const creatorInfo = ref({})
const getCustomerInfoFn = () => {
  getCustomerInfo({ customerId: JSON.parse(localStorage.getItem('login')).userInfo.id }).then((res) => {
    creatorInfo.value = res.data
    creatorInfo.value.memberCode = JSON.parse(localStorage.getItem('login')).userInfo.userNo
  })
}

// 分页
const handleCurrentChange = (val) => {
  if ([1, 2].includes(listType.value)) {
    getList()
  }

  if ([3].includes(listType.value)) {
    getCollectionListFn()
  }
}

const init = () => {
  getDictData('duties')
  getDictData('resume_work_status')
  getList()
  // getCollectionListFn()
  getCustomerInfoFn()
}
onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 225px;

  .header-box {
    display: flex;
    flex-direction: column;

    .top {
      width: 100%;
      height: 190px;
      padding-top: 23px;
      display: flex;

      img {
        width: 162px;
        height: 162px;
        border-radius: 50%;
        margin-right: 27px;
      }

      .user-info {
        h3 {
          font-size: 24px;
          font-weight: 800;
          color: #252628;
          line-height: 22px;
          padding-top: 14px;

          span {
            font-size: 24px;
            color: #ca2a02;
          }
        }

        p,
        div {
          margin-top: 12px;
          font-size: 14px;

          font-weight: bold;
          color: #6a6973;
          max-width: 342px;
        }
      }

      .btn {
        display: flex;
        flex: 1;
        justify-content: end;
        align-items: center;
      }
    }

    .btn-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      // justify-content: space-between;
      li {
        margin-right: 18px;
        margin-top: 14px;
      }
    }
  }
}

.body {
  background: rgba(245, 245, 245, 1);
  min-height: 1110px;
  margin-bottom: -80px;
  padding-top: 20px;
  padding-bottom: 80px;

  .g-con {
    background: #fff;
    padding-left: 30px;
    padding-bottom: 11px;

    .title {
      width: 100%;
      height: 68px;
      line-height: 68px;
      font-size: 20px;

      font-weight: bold;
      color: #ca2a02;
      border-bottom: 2px solid black;
    }

    .tab {
      width: 100%;
      padding-top: 30px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding-right: 30px;

      .tab-item {
        height: 120px;
        text-align: center;
        padding: 36px 0px;
        background: rgba(240, 243, 248, 1);
        cursor: pointer;

        h3 {
          font-size: 28px;
          font-weight: normal;
          color: #252628;
          line-height: 22px;
        }

        p {
          font-size: 14px;

          font-weight: 400;
          color: #6a6973;
          margin-top: 10px;
        }
      }

      .active {
        h3 {
          color: red;
        }

        p {
          color: rgba(202, 42, 2, 1);
        }
      }
    }

    .list {
      width: 1200px;
      margin-top: 29px;
      // max-height: 800px;
      overflow-y: auto;

      .list-item {
        width: 100%;
        // height: 200px;
        background: rgba(247, 249, 251, 1);
        padding: 30px;
        position: relative;
        margin-bottom: 30px;

        .del-btn {
          position: absolute;
          right: 26px;
          top: 26px;
          width: 40px;
          height: 40px;
          background: rgba(202, 42, 2, 1);
          border-radius: 50%;
          padding-left: 9px;
          padding-top: 9px;
          cursor: pointer;
        }

        .time {
          font-size: 14px;

          font-weight: 400;
          color: #9d9fa5;

          span {
            color: rgba(202, 42, 2, 1);
          }
        }

        .list-title {
          font-size: 20px;

          font-weight: bold;
          color: #252628;
          margin-top: 13px;
          margin-bottom: 24px;
        }

        .text {
          font-size: 16px;

          font-weight: 400;
          color: #6a6973;
          line-height: 24px;
        }
      }
    }

    .resume-list {
      width: 1200px;
      margin-top: 29px;
      max-height: 800px;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;

      .item {
        width: 284px;
        // height: 270px;
        background: rgba(245, 245, 245, 1);
        padding: 15px;
        margin-bottom: 30px;
        position: relative;

        .del {
          width: 30px;
          height: 30px;
          position: absolute;
          right: -5px;
          top: -5px;
          background: rgba(202, 42, 2, 1);
          border-radius: 50%;
          padding-left: 6px;
          padding-top: 5px;
          cursor: pointer;
        }

        .el-col {
          img {
            width: 100%;
          }

          text-align: center;
          margin-bottom: 6px;
        }

        .name {
          margin-top: 20px;
          font-size: 18px;

          font-weight: bold;
          color: #252628;
        }

        .status {
          font-size: 10px;

          font-weight: 400;
          color: #ca2a02;

          div {
            min-width: 90px;
            max-width: 190px;
            margin: 0 auto;
            height: 36px;
            background: rgb(243, 178, 162);
            padding: 12px;
          }
        }

        .country {
          font-size: 12px;

          font-weight: 400;
          color: #252628;
        }

        .experience {
          font-size: 14px;

          font-weight: 400;
          color: #01358d;
        }
      }
    }
  }
}
</style>
